<template>
	<view class="container">
		<view class="page" :style="{ backgroundImage: 'url(' + loginImg + ')' }" v-if="canSwitch">
			<view class="btnBox" @click="handleClick()">
				<view class="btnText">
					Start
				</view>
				<view class="btnText1">
					左滑开启留学加速度
				</view>
			</view>
			<view class="skip">
				跳过
			</view>
		</view>
		<view class="page" :style="{ backgroundImage: 'url(' + loginImg + ')', paddingTop: staBarH + 'px' }" v-else>
			<view class="logBox">
				<view class="logText">
					+86 176*****0706
				</view>
				<view class="logBtn" @click="handleLogin">
					本机号码一键登录      
				</view>
				<view class="logIcon">
					<view class="logIconText">
						其他登录方式
					</view>
					<view class="logIconList">
						<view class="logItem"  v-for="(item, index) in logIconList" :key="index">
							<image :src="item" mode=""></image>
						</view>
					</view> 
				</view>
				<view class="logAgreement">
					同意《用户协议》和《隐私政策》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				loginImg: '/static/login/lg01.png',
				currentIndex: 0,
				imgList: [
					'/static/login/lg01.png',
					'/static/login/lg02.png',
					'/static/login/lg03.png'
				],
				 canSwitch: true,
				 staBarH: '',
				 logIconList: [
				 	'/static/login/icon01.png',
				 	'/static/login/icon02.png',
				 	'/static/login/icon03.png',
					'/static/login/icon01.png'
				 ],
			}
		},
		onLoad() {

		},
		onShow() {
			const windowInfo = uni.getWindowInfo();
			this.staBarH = windowInfo.statusBarHeight
		},
		methods: {
			handleClick() {
				if (this.currentIndex === 2) {
					this.canSwitch = false
					this.loginImg = '/static/login/lg05.png'
					return; 
				}
				this.currentIndex = (this.currentIndex + 1) % this.imgList.length;
				this.loginImg = this.imgList[this.currentIndex];
			},
			handleLogin() {
			    uni.showLoading({
			      title: '登录中...'
			    });
			    
			    // 模拟登录请求
			    setTimeout(() => {
			      const res = {
			        code: 200,
			        message: '登录成功',
			        data: {
			          token: 'token',
			          userInfo: {
			            userId: '123456',
			            phone: '138****8888'
			          }
			        }
			      };
			      uni.hideLoading();
			      if (res.code === 200) {
			        // 登录成功处理
			        uni.setStorageSync('token', res.data.token);
			        uni.setStorageSync('userInfo', res.data.userInfo);
			        
			        uni.showToast({
			          title: '登录成功',
			          icon: 'success'
			        });
					uni.navigateTo({
						url:'/pages/index/applyForm'
					})
			      } else {
			        uni.showToast({
			          title: res.message || '登录失败',
			          icon: 'none'
			        });
			      }
			    }, 1500); 
			  }
		}
	}
</script>

<style scoped lang="scss">
	.page {
		// background-image: url("");
		/* #ifndef APP */
		height: 1596rpx;
		/* #endif */
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding-top: 30rpx;
		/* #ifdef APP */
		height: 1620rpx;
		/* #endif */
	}
	.logBox {
		position: fixed;
		bottom: 516rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 200rpx;
		.logAgreement {
			width: 500rpx;
			text-align: center;
			font-size: 24rpx;
			color: rgba(9,29,30,0.5);
			margin-top: 100rpx;
		}
		.logIcon {
			display: flex;
			flex-direction: column;
			align-items: center;
			.logIconText {
				font-size: 26rpx;
				color: rgba(61,61,61,0.5);
				margin-bottom: 20rpx;
			}
			.logIconList{
				display: flex;
				flex-direction: row;
				.logItem {
					margin-left: 18rpx;
				}
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.logText {
			width: 500rpx;
			height: 52rpx;
			color: #000000;
			font-size: 46rpx;
			line-height: 52rpx;
			text-align: center;
			font-weight: 700;
		}
		.logBtn {
			width: 500rpx;
			// height: 104rpx;
			background: #008FF6;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			text-align: center;
			line-height: 104rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			margin-top: 28rpx;
			margin-bottom: 130rpx;
		}
	}

	.btnBox {
		width: 500rpx;
		height: 104rpx;
		background: #008FF6;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 76rpx;
		left: 50%;
		transform: translateX(-50%);

		.btnText {
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.btnText1 {
			font-size: 20rpx;
			color: #FFFFFF;
		}
	}
	.skip {
		width: 120rpx;
		height: 60rpx;
		background: rgba(0,0,0,0.1);
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-size: 28rpx;
		color: #767D8A;
		text-align: center;
		line-height: 60rpx;
		position: fixed;
		/* #ifndef APP */
		top: 90rpx;
		/* #endif */
		/* #ifdef APP */
		top: 120rpx;
		/* #endif */
		right: 18rpx;
	}
</style>